import React from 'react';
import { Row, Col, Card, Statistic, Skeleton, Typography } from 'antd';
import { TeamOutlined, UserOutlined, BarChartOutlined } from '@ant-design/icons';

const { Text } = Typography;

interface StatCardsProps {
    loading: boolean;
    groupCount: number | null;
    studentCount: number | null;
    teacherCount: number | null;
    logCount: number | null;
}

const StatCards: React.FC<StatCardsProps> = ({
                                                 loading,
                                                 groupCount,
                                                 studentCount,
                                                 teacherCount,
                                                 logCount
                                             }) => {

    const renderValue = (value: number | null) => {
        if (value === null || value === undefined) return '暂无数据';
        return value;
    };

    return (
        <Row gutter={[16, 16]}>
            <Col xs={24} sm={12} md={6}>
                <Card>
                    {loading ? (
                        <Skeleton active paragraph={{ rows: 1 }} />
                    ) : (
                        <Statistic
                            title="小组总数"
                            value={renderValue(groupCount)}
                            prefix={<TeamOutlined />}
                        />
                    )}
                </Card>
            </Col>
            <Col xs={24} sm={12} md={6}>
                <Card>
                    {loading ? (
                        <Skeleton active paragraph={{ rows: 1 }} />
                    ) : (
                        <Statistic
                            title="学生总数"
                            value={renderValue(studentCount)}
                            prefix={<UserOutlined />}
                        />
                    )}
                </Card>
            </Col>
            <Col xs={24} sm={12} md={6}>
                <Card>
                    {loading ? (
                        <Skeleton active paragraph={{ rows: 1 }} />
                    ) : (
                        <Statistic
                            title="教师总数"
                            value={renderValue(teacherCount)}
                            prefix={<UserOutlined />}
                        />
                    )}
                </Card>
            </Col>
            <Col xs={24} sm={12} md={6}>
                <Card>
                    {loading ? (
                        <Skeleton active paragraph={{ rows: 1 }} />
                    ) : (
                        <Statistic
                            title="总活跃度"
                            value={renderValue(logCount)}
                            prefix={<BarChartOutlined />}
                        />
                    )}
                </Card>
            </Col>
        </Row>
    );
};

export default StatCards;